<template>
  <div class="manage_r">
    <ul>
      <li>
        <div>
          <img src="../../assets/images/tushu.jpg" alt="">
        </div>
        <div>
          <h2><a href="#">书名：三国演义</a></h2>
          <div class="article">
            <p>作者：罗贯中</p>
            <p>出版社： 人民出版社</p>
          </div>
        </div>
<el-row>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
  <span>取消收藏</span>
</el-row>
      </li>

      <li>
        <div>
          <img src="../../assets/images/tushu.jpg" alt="">
        </div>
        <div>
          <h2><a href="#">书名：三国演义</a></h2>
          <div class="article">
            <p>作者：罗贯中</p>
            <p>出版社： 人民出版社</p>
          </div>
        </div>
<el-row>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
  <span>取消收藏</span>
</el-row>
      </li>

      <li>
        <div>
          <img src="../../assets/images/tushu.jpg" alt="">
        </div>
        <div>
          <h2><a href="#">书名：三国演义</a></h2>
          <div class="article">
            <p>作者：罗贯中</p>
            <p>出版社： 人民出版社</p>
          </div>
        </div>
<el-row>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
  <span>取消收藏</span>
</el-row>
      </li>

      <li>
        <div>
          <img src="../../assets/images/tushu.jpg" alt="">
        </div>
        <div>
          <h2><a href="#">书名：三国演义</a></h2>
          <div class="article">
            <p>作者：罗贯中</p>
            <p>出版社： 人民出版社</p>
          </div>
        </div>
<el-row>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
  <span>取消收藏</span>
</el-row>
      </li>

      <li>
        <div>
          <img src="../../assets/images/tushu.jpg" alt="">
        </div>
        <div>
          <h2><a href="#">书名：三国演义</a></h2>
          <div class="article">
            <p>作者：罗贯中</p>
            <p>出版社： 人民出版社</p>
          </div>
        </div>
<el-row>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
  <span>取消收藏</span>
</el-row>
      </li>


    </ul>
    <div class="block">
      <span class="demonstration">页数较少时的效果</span>
      <el-pagination
        layout="prev, pager, next"
        :total="50">
      </el-pagination>
    </div>
  </div>
</template>
<script>
    export default {}
</script>
<style>
    .manage_r>ul {
        height: 90%;
        padding: 20px;
    }

    .manage_r>ul li {
        display: flex;
        margin: 20px;
        background-color: #cfe8fc;
        border-radius: 5px;
    }

    .manage_r>ul li div {
        margin-right: 30px;
    }

    .manage_r>ul li img {
        width: 100px;
    }

    .manage_r>ul li div:nth-child(2) {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .article p {
        font-size: 14px;
        color: #333333;
    }

    .manage_r .el-row {
        transform: translate(444px, 13px);
    }
</style>
